<!-- 附加费用管理 -->
<template>
  <div class="additional_fees_manager">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <el-button @click="add" type="primary">新增附加费用</el-button>
      </div>
      <DataCollectTable :data="data" :total="total" :config="tableConfig" @operationsHander="opHander.receive">
      </DataCollectTable>
    </el-main>
    <el-dialog v-model="dialogVisible" :title="title" width="35%" top="10vh" class="base_dialog additional_fees_dialog">
      <el-form ref="formRef" :model="additionalFeesForm" :rules="additionalFeesRules" label-width="80px">
        <el-form-item label="一级名称" prop="groupName">
          <el-input v-model="additionalFeesForm.groupName" />
        </el-form-item>
        <el-form-item label="二级名称" prop="extraName">
          <el-input v-model="additionalFeesForm.extraName" />
        </el-form-item>
        <el-form-item label="费用金额" prop="extraPrice">
          <el-input-number v-model.number="additionalFeesForm.extraPrice" :min="0" :precision="2" controls-position="right" />
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model.number="additionalFeesForm.supplier" />
        </el-form-item>
        <el-form-item label="费用详情" prop="picUrl">
          <UploadSinglePicture v-model="additionalFeesForm.picUrl" :width="200" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import DataCollectTable from "@com/table/DataCollectTable.vue";
import {
  OP_KEY,
  COLUMN_TYPE,
  OPERATIONS,
  operationsHander,
} from "@com/table/tableOperations";
import UploadSinglePicture from "@com/upload/UploadSinglePicture.vue";
import { ref, reactive } from "vue";
import $ from "@util/base";
import { $msg, $box } from '@/common/ui/msg';
import useRoute from "@util/router";
import api from "@api/additionalFees";

const route = useRoute()

const total = ref(0)
const data = ref([])

function getOperations() {
  return [OPERATIONS.modify, OPERATIONS.del]
}

const tableConfig = {
  showIndex: true,
  operations: {
    label: '操作',
    width: 120,
    operations: getOperations
  },
  column: [
    {
      label: '一级名称',
      prop: 'groupName',
    }, {
      label: '二级名称',
      prop: 'extraName',
    }, {
      label: '费用金额',
      prop: 'extraPrice',
      width: 150,
    }, {
      label: '供应商',
      prop: 'supplier',
    }, {
      label: '费用详情',
      prop: 'picUrl',
      type: COLUMN_TYPE.picture,
      width: 100,
    }
  ]
}

const dialogVisible = ref(false)
const title = ref("")

const formRef = ref(null)
const additionalFeesForm = ref({})

var additionalFeesId = null
const opHander = operationsHander();
opHander.install(OP_KEY.modify, (data) => {
  title.value = "修改附加费用"
  additionalFeesId = data.id
  dialogVisible.value = true
  resetForm()
  api.details(data.id, (val) => {
    additionalFeesForm.value = val
  })
});
opHander.install(OP_KEY.delete, (data) => {
  $box.open("删除确认", `是否删除该附加费用`, () => {
    api.delete(data.id, () => {
      $msg.succ("删除成功");
      getList();
    });
  });
});

const additionalFeesRules = {
  groupName: [{
    required: true,
    message: '请输入一级名称',
    trigger: 'blur',
  }],
  extraName: [{
    required: true,
    message: '请输入二级名称',
    trigger: 'blur',
  }],
  extraPrice: [{
    required: true,
    message: '请输入费用金额',
    trigger: 'blur',
  }],
  picUrl: [{
    required: true,
    message: '请上传费用详情',
    trigger: 'change',
  }],
}

const submitForm = (formEl) => {
  formEl.validate((valid, fields) => {
    if (valid) {
      if (additionalFeesId) {
        api.update(additionalFeesForm.value, additionalFeesId, () => {
          $msg.succ("修改成功")
          dialogVisible.value = false
          getList()
        })
      } else {
        api.add(additionalFeesForm.value, () => {
          $msg.succ("新增成功")
          dialogVisible.value = false
          getList()
        })
      }
    }
  })
}

const resetForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}

function add() {
  title.value = "新增附加费用"
  additionalFeesId = null
  dialogVisible.value = true
  resetForm()
}

getList();

function getList() {
  let routeQuery = route.query();
  api.list({
      page: routeQuery.p,
      size: routeQuery.s,
    }, (val) => {
      total.value = val.total;
      data.value = val.itemList;
    }
  );
}
</script>

<style lang="scss">
.additional_fees_dialog {
  .el-input-number {
    max-width: 100% !important;
  }
}
</style>
